<template>
  <div class="app-container">

       <el-row>
            <el-col :span="1">
                <el-button size="small" type="danger" @click="downLoadExcelBtn">下载模板</el-button> 
            </el-col>
            <el-col :span="1" :push="1">
                 <el-upload
                       class="upload-demo"
                       name="excelFile"
                       :headers="headers"
                       action="/dev-api/orderset/orderset/upExcel"
                       :on-change="uploadFile" >
                          <el-button size="small" type="primary">点击上传</el-button> 
                  </el-upload>
            </el-col>
          </el-row>


 
  


    <!-- {{ dayobject }} -->
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <div
          style="
            background-color: #87cefa;
            margin: -7px -7px 0px -7px;
            height: 84px;
          "
          v-if="date > toDay && date <= nDay"
        >
          <el-row>
            <el-col :span="8">
              <span :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split("-").slice(1).join("-") }}
              </span>
            </el-col>
            <el-col :span="4" :push="10">
              <el-button size="mini" type="primary" @click="orderSetBtn(data.day,settings[dates.indexOf(data.day)])"  >设置</el-button>
            </el-col>
          </el-row>

          <div
            style="text-align: center; margin-top: 0px"
            v-if="dates.indexOf(data.day) >=0"
          >
            <span>可预约人数:{{settings[dates.indexOf(data.day)].number}}</span><br />
            <span
              >已预约人数:{{
               settings[dates.indexOf(data.day)].reservations
              }}</span>
          </div>
        </div>

        <div style="margin: -8px; height: 85px" v-else>
          <el-row>
            <el-col :span="8">
              <span :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split("-").slice(1).join("-") }}
              </span>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-calendar>

    <!-- 添加或修改订单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

       <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-form-item  label="可预约日期"   label-width="100px">
          {{ form.orderDate}}
        </el-form-item>
        
        <el-form-item label="可预约人数" prop="number"  label-width="100px">
          <el-input v-model="form.number" placeholder="可预约人数"   />
        </el-form-item>
        <el-form-item label="已预约人数" prop="reservations"  label-width="100px">
          <el-input v-model="form.reservations" placeholder="已预约人数" />
        </el-form-item>
    
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="submitBtn"  >确 定</el-button>
        <el-button  @click="resetBtn"  >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOrderset,
  getOrderset,
  delOrderset,
  addOrderset,
  updateOrderset,
  getOrderDate7Days,
} from "@/api/orderset/orderset";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
export default {
  name: "Orderset",
  data() {
    return {
        headers: {
        Authorization: "Bearer " + getToken(),
      },
      toDay: new Date(), // 2022-03-10 13:43
      nDay: new Date(new Date().getTime() + 24 * 3600 * 1000 * 7),
      settings: [],
      dates: [],

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 预约设置表格数据
      ordersetList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderDate: null,
        number: null,
        reservations: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.initData();
  },
  methods: {
    //上传excel
    uploadFile(){
           this.initData();
    },


    //下载 excel 
    downLoadExcelBtn(){
       // window.location = "/33.txt";

      //window.location = "/getExcel/getFile";

       request.get("/getExcel/getFile",{ responseType:'blob'}).then(res=>{
         console.log(res)

            let blob = new Blob([res])
            let downloadElement = document.createElement('a')
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = `ordersetting_template.xlsx`; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放blob对象


       })

    },
    submitBtn(){
      // 获取  弹窗内容 ajax 提交
      // 如果  有数据就是 修改， 否则就是 添加
      console.log( 'this.form', this.form)
      console.log( 'this.form', this.form.hasOwnProperty('id'))
      if(this.form.hasOwnProperty('id')){
          // 真。 则 修改 
         alert('真')
          request({
            url:'/orderset/orderset',
            data:this.form,
            method:'put'
          }).then(res=>{
            console.log(res)
            if(res.code==200){
              this.$modal.msgSuccess("修改成功");
              this.initData();
              this.open=false;
            }else{
              this.$modal.msgSuccess("修改失败");
              this.initData();
              this.open=false;
            }
          });
          
      }else{
             
          // 假的 则 新增
         console.log('xxxxxx',this.form)
          request({
            url:'/orderset/orderset',
            data:this.form,
            method:'post'
          }).then(res=>{
            console.log(res)
            this.open=false
              
          });
      }

    },

    resetBtn(){
         this.form={}
         this.open=false
    },
    //设置
    orderSetBtn(day,dayModel){
      this.form={}
         // 发送到后台， 携带 当天的日期 作为参数
         console.log( 'day' , day );
         console.log( 'dayModel' , dayModel );
      
        if(dayModel !=undefined){
           this.form = dayModel
        }else{
          this.form.orderDate=day
        }
         this.open=true

    },
    //初始化当前页要展示的日期
    initData() {
      getOrderDate7Days().then((res) => {
        console.log("res", res.data);
        this.settings = res.data;
        for (var i = 0; i < this.settings.length; i++) {
          this.dates.push(this.settings[i].orderDate);
        }
        console.log(this.dates)
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateOrderset(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              
            });
          } else {
            addOrderset(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
             
            });
          }
        }
      });
    },
  },
};
</script>
